<!-- 角色列表 -->
<template>
<div class="role-list-wp com-main _table-wp" v-loading="loadInterface > 0" element-loading-text="拼命加载中">
  <com-search :form="form" :showAdvanced="false" @search="search()">
    <template slot-scope="scope">
      <el-form-item label="用户名" prop="roleName">
        <el-input v-model="form.roleName" clearable></el-input>
      </el-form-item>
    </template>
  </com-search>

  <div class="com-hd-box">
    <el-button size="small" icon="el-icon-plus" type="primary" @click="$refs.roleInfo.open(1)">角色录入</el-button>
    <el-button size="small" icon="el-icon-upload2" type="primary">导入</el-button>
    <el-button size="small" icon="el-icon-download" type="primary">导出</el-button>
  </div>

  <div class="table-box">
    <el-table ref="table" :data="table.data"
      border
      size="medium"
      :header-cell-style="{'background-color': '#fafafa'}"
      @sort-change="sortChange">
      <el-table-column v-for="(item, index) in table.head" :key="index"
        :prop="item.key"
        :label="item.name"
        :width="item.width"
        :sortable="item.sortable"
        :formatter="item.formatter"
        :default-sort = "{prop: 'createTime', order: 'descending'}"
        align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <div class="_td-hd-box" slot-scope="scope">
          <el-link class="com-mr10" type="primary" :underline="false" @click="$emit('setRoleId', scope.row.id)">用户</el-link>
          <el-dropdown size="medium" placement="bottom">
            <el-link type="primary" :underline="false">更多<i class="el-icon-arrow-down el-icon--right"></i></el-link>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><div @click="$refs.rolePermissions.open(scope.row)">授权</div></el-dropdown-item>
              <el-dropdown-item><div @click="$refs.roleInfo.open(2, scope.row)">编辑</div></el-dropdown-item>
              <el-dropdown-item><div @click="handleDelete(scope.row.id)">删除</div></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-table-column>
    </el-table>
    <com-page :page="page" @change="changePage"></com-page>
  </div>

  <!-- 角色弹窗 -->
  <role-info ref="roleInfo" @reload="loadData"></role-info>
  <!-- 角色权限配置 -->
  <role-permissions ref="rolePermissions"></role-permissions>

</div>
</template>
<script>

import roleInfo from "@/dialogs/system/role/role-info.vue";
import rolePermissions from "@/dialogs/system/role/role-permissions.vue";

import TableMixin from "@/mixins/TableMixin.js";

import {role} from "@/config/api.js";
import {switchTime} from "@/utils/tools.js";

export default {
  mixins: [TableMixin],
  components: {
    roleInfo,
    rolePermissions,
  },
  data () {
    return {
      form: {
        roleName: '',
        column: 'createTime',
        order: 'desc'
      },
      
      table: {
        head: [
          {name: '角色编码', key: 'roleCode'},
          {name: '角色名称', key: 'roleName'},
          {name: '创建时间', key: 'createTime', sortable: true, formatter: (row, column, cellValue, index) => {
            return switchTime(cellValue, 'yyyy-MM-dd');
          }},
        ],
        data: []
      },

      // 当前的url
      url: {
        list: role.list,
        delete: role.delete
      }
    }
  },
  methods: {
    sortChange (data) {
      this.form.column = data.prop;
      this.form.order = data.order == 'descending' ? 'desc' : 'asce';
      this.loadData();
    }
  }
}
</script>
<style lang="scss" scoped>
.role-list-wp {
  min-height: 600px;
}

</style>